<!-- d -->
<template>
  <div class="">
    {{ data }}
    {{ data1 }}
    {{ data2 }}
    <button @click="add">点击</button>
    <button @click="test">点击</button>
  </div>
</template>


<script setup>
import { reactive, ref } from "vue";

/* reactive 包裹的对象可以是响应式,但是只能对象是响应式 */
const data = reactive({
  name: 123,
  msg: {
    title: "哈哈哈",
    content: "222",
  },
});

/* ref 包裹的对象可以是响应式,里面可以是对象也可以是常量,且传入的值都会被封装成一个属性为value值为传入值的对象 */
const data1 = ref(10); // 封装 {value:10}

/* 
  封装 {value:{test1: "123",test2: {test3: "test3",}}}
*/
const data2 = ref({
  test1: "123",
  test2: {
    test3: "test3",
  },
});

function test() {
  // 在setup中修改或者读取都需要添加value的属性值进行读取
  data2.value.test2.test3 = "1223";
}

function add() {
  data.msg.title = "1223";
}
</script>


<style lang='' scoped>
/* @import url(); 引入公共css类 */
</style>